<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="../../common.css">
	<style>
		h1 {
			font-family: Arial-BoldMT, Arial;
			filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.52));
			background: linear-gradient(180deg, #F7CF3A 0%, #FC9704 100%);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 30px;
			font-weight: bold;
		}

		.text {
			display: flex;
			flex-direction: column;
			width: 100px;
			align-items: center;
			position: relative;
			text-align: center;
			overflow: hidden;
			font-size: 60px;
		}

		.text span {
			background: linear-gradient(180deg, #fff 0%, red 100%);
			font-family: Arial-BoldMT, Arial;
			filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.52));
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 60px;
			font-weight: bold;
			line-height: 1.12;
		}

		.text1 {
			display: inline-block;
			position: relative;
			writing-mode: vertical-lr;
			text-orientation: upright;
			text-align: center;
			overflow: hidden;
			background: linear-gradient(180deg, #fff 0%, red 100%);
			font-family: Arial-BoldMT, Arial;
			filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.52));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 60px;
			font-weight: bold;
			background-size: 100% 10%;
			background-repeat: repeat;
			vertical-align: top;

		}
	</style>
	<body>
		<section>
			<h1>苏苏小苏苏</h1>
			<h1>0123456789</h1>
			<div class="flex-row">
				<div class="text">
					<span>0</span>
					<span>1</span>
					<span>2</span>
					<span>3</span>
					<span>4</span>
					<span>5</span>
					<span>6</span>
					<span>7</span>
					<span>8</span>
					<span>9</span>
				</div>
				<h2 class="text1">
					0123456789
				</h2>
			</div>
		</section>
	</body>
</html>
